<template>
  <!-- 猜你喜欢-->
  <view class="caption">
    <text class="text">推荐图书</text>
  </view>
  <view class="guess">
    <view class="guess-item" v-for="item in guessList" :key="item.id" @tap="clickGuess(item)">
      <image class="image" mode="aspectFill" :src="item.image"></image>
      <view class="name">{{ '《' + item.name + '》' }}</view>
      <!-- <view class="name">{{ '作者: ' + item.author }}</view> -->
      <!-- <view class="price">
        <text class="small">￥</text>
        <text>{{ item.name }}</text>
      </view> -->
    </view>
  </view>
  <uni-load-more
    class="loading-text"
    :status="loadingStatus"
    :content-text="MORE_MSG_OBJ"
    iconType="auto"
  />
</template>

<script setup lang="ts">
import { MORE_MSG_OBJ } from '@/store/contants'
import { PageParam, PageResult } from '@/types/global'
import { Guess } from '@/types/home'
import { SearchItem } from '@/types/search'
import { getGuessListApi } from '@/service/global'
const loadingStatus = ref()
/** ***** */
const pageParams: Required<PageParam> = {
  // Required ts函数 表示必填（防止page为undefined时 ++报错）
  page: 1,
  size: 10,
}
const guessList = ref<SearchItem[]>([])
const finish = ref(false)
const getData = async () => {
  console.log(finish.value)
  if (finish.value) {
    uni.showToast({
      title: '到底了',
      icon: 'none',
      mask: true,
    })
    return
  }
  loadingStatus.value = 'loading'
  const guessListRes = await getGuessListApi(pageParams)
  console.log('请求数据', guessListRes.data)
  guessList.value.push(...guessListRes.data.records)
  if (pageParams.page < guessListRes.data.pagination.pages) {
    pageParams.page++
    loadingStatus.value = 'more'
  } else {
    finish.value = true
    loadingStatus.value = 'noMore'
  }
  console.log('pageParams', pageParams)
}

const resetData = async () => {
  pageParams.page = 1
  const guessListRes = await getGuessListApi(pageParams)
  guessList.value = guessListRes.data.records

  pageParams.page++
  finish.value = false
}

const clickGuess = (item: SearchItem) => {
  uni.showLoading({ title: '请稍后...', mask: true })
  uni.navigateTo({ url: '/pages/search/bookInfo?id=' + item.id })
  uni.hideLoading()
}

defineExpose({
  resetData,
  getMore: getData,
})

onMounted(() => {
  getData()
})
</script>

<style lang="scss">
:host {
  display: block;
}

.caption {
  display: flex;
  justify-content: center;
  padding: 36rpx 40rpx;
  font-size: 32rpx;
  line-height: 1;
  color: #262626;

  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      width: 20rpx;
      height: 20rpx;
      margin: 0 10rpx;
      content: '';
      background-image: url(@/static/home/bubble.png);
      background-size: contain;
    }
  }
}

.guess {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 10rpx;
  text-align: center;
  border-radius: 20rpx;

  .guess-item {
    justify-content: space-between;
    width: 49%;
    overflow: hidden;
    // background-color: #fff;
    border-radius: 20rpx;
  }

  .image {
    width: 300rpx;
    height: 320rpx;
    border-radius: 10rpx;
  }

  .name {
    display: -webkit-box;
    height: 75rpx;
    margin: 5rpx 10rpx;
    overflow: hidden;
    font-size: 33rpx;
    line-height: 55rpx;
    color: 口#262626;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    padding-top: 4rpx;
    font-size: 26rpx;
    line-height: 1;
    color: 口#cf4444;
  }
}

// 加载提示文字
.loading-text {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  text-align: center;
}
</style>
